<!--
 * @FilePath     : /study_code/layui/10-3.html
 * @Description  : 在表格中使用
 * @Date         : 2025-04-09 10:34:32
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-09 10:44:54
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <!-- 表格 -->
    <table class="layui-hide" id="ID-dropdown-demo-table"></table>

    <!-- 脚本 -->
    <script type="text/html" id="ID-dropdown-demo-table-tool">
      <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs" lay-event="more">
        更多
        <i class="layui-icon layui-icon-down"></i>
      </a>
    </script>

    <script src="/layui/dist/layui.js"></script>
    <script src="/table/common.js"></script>
    <script>
      layui.use(function () {
        var table = layui.table
        var dropdown = layui.dropdown

        // dropdown 在表格中的应用
        table.render({
          elem: '#ID-dropdown-demo-table',
          // url: '/static/json/2/table/demo5.json',
          data: tableData,
          title: '用户数据表',
          cols: [
            [
              { type: 'checkbox', fixed: 'left' },
              { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },
              { field: 'username', title: '用户名', width: 120, edit: 'text' },
              { field: 'classify', title: '邮箱', minWidth: 150 },
              {
                fixed: 'right',
                title: '操作',
                toolbar: '#ID-dropdown-demo-table-tool',
                width: 150,
              },
            ],
          ],
          limits: [3],
          page: true,
        })
        // 行工具事件
        table.on('tool(ID-dropdown-demo-table)', function (obj) {
          var that = this
          var data = obj.data

          if (obj.event === 'edit') {
            layer.prompt(
              {
                formType: 2,
                value: data.email,
              },
              function (value, index) {
                obj.update({
                  email: value,
                })
                layer.close(index)
              }
            )
          } else if (obj.event === 'more') {
            // 更多下拉菜单
            dropdown.render({
              elem: that,
              show: true, // 外部事件触发即显示
              data: [
                {
                  title: 'item 1',
                  id: 'aaa',
                },
                {
                  title: 'item 2',
                  id: 'bbb',
                },
                {
                  title: '删除',
                  id: 'del',
                },
              ],
              click: function (data, othis) {
                //根据 id 做出不同操作
                if (data.id === 'del') {
                  layer.confirm('真的删除行么', function (index) {
                    obj.del()
                    layer.close(index)
                  })
                } else {
                  layer.msg('得到表格下拉菜单 id：' + data.id)
                }
              },
              align: 'right', // 右对齐弹出
              style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);', //设置额外样式
            })
          }
        })
      })
    </script>
  </body>
</html>
